<template>
  <div class="box">
    <div class="innerBox">
      <div class="photo" @click="getPhoto">
        <el-image
          style="width: 100%; height: 100%"
          :src="photoSrc"
          :lazy="true"
          fit="contain"
        >
          <div slot="error" class="prompt">点击上传图片</div>
        </el-image>
      </div>
      <div class="popInFo">
        <div class="item">
          <div>题目判断</div>
          <div class="content">
            <div class="itemInner">
              <div>这道题做对了吗</div>
              <div>
                <el-radio v-model="form.result" label="正确">做对了</el-radio>
                <el-radio v-model="form.result" label="错误">没做对</el-radio>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div>题型辨识</div>
          <div class="content">
            <div class="itemInner" v-for="item in questionType">
              <div>
                {{ item.name }}
              </div>
              <div>
                <el-radio v-model="item.isNo" label="yes"
                  >选项没问题了</el-radio
                >
                <el-radio v-model="item.isNo" label="no"
                  >我对这个选项有疑问</el-radio
                >
              </div>
            </div>
            <el-button type="text" @click="getQuestionType(5)"
              ><i class="el-icon-circle-plus"></i> 添加选项</el-button
            >
          </div>
        </div>
        <div class="item">
          <div>条件翻译</div>
          <div class="content">
            <div class="itemInner" v-for="item in condition">
              <div>
                {{ item.name }}
              </div>
              <div>
                <el-radio v-model="item.isNo" label="yes"
                  >选项没问题了</el-radio
                >
                <el-radio v-model="item.isNo" label="no"
                  >我对这个选项有疑问</el-radio
                >
              </div>
            </div>
            <el-button type="text" @click="getQuestionType(8)"
              ><i class="el-icon-circle-plus"></i> 添加选项</el-button
            >
          </div>
        </div>
        <div class="item">
          <div>计算</div>
          <div class="content">
            <div class="itemInner" v-for="item in count">
              <div>
                {{ item.name }}
              </div>
              <div>
                <el-radio v-model="item.isNo" label="yes"
                  >选项没问题了</el-radio
                >
                <el-radio v-model="item.isNo" label="no"
                  >我对这个选项有疑问</el-radio
                >
              </div>
            </div>
            <el-button type="text" @click="getQuestionType(9)"
              ><i class="el-icon-circle-plus"></i> 添加选项</el-button
            >
          </div>
        </div>
        <div class="innerBtn">
          <el-button>重置</el-button>
          <el-button type="primary" @click="submitFx">提交分析</el-button>
        </div>
      </div>
    </div>
    <!-- ---------------- -->

    <el-dialog
      title="提示"
      :visible.sync="visibles"
      width="50vw"
      class="dialogAddTree"
    >
      <div>
        <el-tag
          :key="tag.labelId"
          v-for="(tag, index) in temporaryArray"
          closable
          style="margin-right: 15px; margin-bottom: 10px"
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag.name }}
        </el-tag>
      </div>
      <div style="height: 100%">
        <div class="diaRight">
          <el-tree
            :data="typeTreeData"
            :props="defaultProps"
            :highlight-current="true"
            :default-expand-all="false"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span style="margin-right: 15px">{{ node.label }}</span>
              <span class="label">
                <el-button
                  type="text"
                  size="mini"
                  @click.stop="() => append(node, data)"
                  icon="el-icon-circle-plus-outline"
                >
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </el-dialog>
    <!-- ---------------- -->
    <el-dialog
      title="提示"
      :visible.sync="tage"
      width="50vw"
      class="dialogAddTree1"
    >
      <el-form :inline="true" style="text-align: center">
        <el-form-item label="选择生成试卷标签">
          <el-select
            v-model="form.topicTag"
            style="min-width: 300px"
            placeholder="请选择"
            popper-class="mediaPopu"
          >
            <el-option
              v-for="item in options"
              :key="item.labelId"
              :label="item.name"
              :value="item.labelId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="generateTestPapers">生成试卷</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- ---------------- -->
  </div>
</template>
<script>
import { listTypes } from "@/api/questionBank/type.js";
import {
  upLoad,
  addAnalysisOfTheStudents,
} from "../../../api/studentEnd/analysisOfTheStudents";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      photoSrc: "",
      questionType: [],
      condition: [],
      count: [],
      index: null,
      visibles: false,
      temporaryArray: [], //弹出框回显的标签
      oldClick: {},
      typeTreeData: [],
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      form: {
        pictureAddress: "", //图片地址
        result: "", //上传题目的正确错误
        topicTag: "", //根据哪个标签生成题目
        leaStaAndLabelList: [], //标签
        result: "错误", //这道题做对了吗
      },
      options: [],
      tage: false,
    };
  },
  watch: {
    visibles: function (n, o) {
      if (!n) {
        this.temporaryArray = [];
      }
    },
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    getPhoto() {
      let inp = document.createElement("input");
      inp.type = "file";
      inp.capture = "camera";
      inp.accept = "image/*";
      inp.onchange = this.getPhotoInFo;
      inp.click();
    },
    getPhotoInFo(e) {
      let file = e.target.files[0];

      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        upLoad(formData).then((res) => {
          if (res.code == 200) {
            this.$message.success("上传成功");
            this.form.pictureAddress = res.url;
            // 创建一个FileReader对象来读取文件内容
            let reader = new FileReader();
            reader.onload = (event) => {
              // 当文件读取完成后，将结果（图片的URL）输出到控制台并显示在网页上
              this.photoSrc = event.target.result;
            };
            // 以DataURL的形式读取文件内容
            reader.readAsDataURL(file);
          } else {
            this.$message.error("上传失败");
          }
        });
      }
    },
    //获取标签
    getQuestionType(val, arr) {
      listTypes({ reserve3: val }).then((Response) => {
        if (Response.code == 200) {
          this.index = val;
          this.typeTreeData = Response.rows;
          this.visibles = true;
          if (this.index == 5) {
            this.temporaryArray = JSON.parse(JSON.stringify(this.questionType));
          }
          if (this.index == 8) {
            this.temporaryArray = JSON.parse(JSON.stringify(this.condition));
          }
          if (this.index == 9) {
            this.temporaryArray = JSON.parse(JSON.stringify(this.count));
          }
        }
      });
    }, //删除标签
    handleClose(tag) {
      this.temporaryArray.splice(this.temporaryArray.indexOf(tag), 1);

      if (this.index == 5) {
        this.questionType.splice(this.questionType.indexOf(tag), 1);
      }
      if (this.index == 8) {
        this.condition.splice(this.condition.indexOf(tag), 1);
      }
      if (this.index == 9) {
        this.count.splice(this.count.indexOf(tag), 1);
      }
    },
    //从树状图添加
    append(node, data) {
      let obj = {
        name: data.name,
        labelId: data.id,
        isNo: "yes",
      };

      if (this.index == 5) {
        // 使用 find 方法检查数组中是否已存在具有相同属性的对象
        const existingObj = this.questionType.find(
          (item) => item.name === obj.name && item.labelId === obj.labelId
        );
        if (existingObj) {
          this.$message.warning("不能添加重复标签");
          return;
        }
        this.questionType.push(obj);
      }
      if (this.index == 8) {
        // 使用 find 方法检查数组中是否已存在具有相同属性的对象
        const existingObj = this.condition.find(
          (item) => item.name === obj.name && item.labelId === obj.labelId
        );
        if (existingObj) {
          this.$message.warning("不能添加重复标签");
          return;
        }
        this.condition.push(obj);
      }
      if (this.index == 9) {
        // 使用 find 方法检查数组中是否已存在具有相同属性的对象
        const existingObj = this.count.find(
          (item) => item.name === obj.name && item.labelId === obj.labelId
        );
        if (existingObj) {
          this.$message.warning("不能添加重复标签");
          return;
        }
        this.count.push(obj);
      }
      this.temporaryArray.push(obj);
    },
    submitFx() {
      if (this.form.pictureAddress == "") {
        this.$message.warning("请上传图片");
        return;
      }
      if (this.questionType.length == 0) {
        this.$message.warning("请选择题型辨识标签");
        return;
      }
      if (this.condition.length == 0) {
        this.$message.warning("请选择条件翻译标签");
        return;
      }
      if (this.count.length == 0) {
        this.$message.warning("请选择计算标签");
        return;
      }

      let arr = [...this.questionType, ...this.condition, ...this.count];
      this.options = arr;
      this.tage = true;

      console.log(this.form);
    },
    //生成试卷
    generateTestPapers() {
      if (this.form.topicTag == "") {
        this.$message.warning("请选择要生成试题的标签");
        return;
      }
      this.form.leaStaAndLabelList = this.options;
      this.form.userId = this.userId;
      console.log(this.form);
      addAnalysisOfTheStudents(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          let id = res.msg.split("id为")[1];
          setTimeout(() => {
            this.$router.push(
              "/studentEnd/studentEnd/analysisOfTheStudents/wrongQuestion?examinationPaperSummaryId=" +
                id
            );
          }, 1000);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: #f1f3f8;
  flex-direction: column;
  padding: 15px;
  .innerBox {
    flex: 1;
    background-color: white;
    display: flex;
    padding: 15px;
    overflow: auto;
    .photo {
      max-height: 50%;
      flex: 1;
      border: 1px red solid;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      ::v-deep .prompt {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .popInFo {
      flex: 2;
      margin-left: 15px;
      margin-top: 10px;
      > .item {
        min-height: 100px;
        border: #f1f3f8 1px solid;
        margin-bottom: 15px;
        padding: 5px;
        > div:nth-of-type(1) {
          font-size: 20px;
        }
        > .content {
          .itemInner {
            padding: 15px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px #f1f3f8 solid;
            > div:nth-of-type(1) {
              align-self: flex-start;
              margin-bottom: 10px;
            }
            > div:nth-of-type(2) {
              min-width: 290px;
            }
          }
        }
      }

      .innerBtn {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.dialogAddTree1 {
  ::v-deep .el-dialog {
    min-width: 700px;
  }
}
.dialogAddTree {
  ::v-deep .el-dialog {
    min-width: 1070px;
  }

  .diaRight {
    flex: 1;
    overflow: auto;
    width: 100%;
    max-height: 800px;
    position: relative;
    .el-tree {
      width: max-content;
    }
    .label {
      display: none !important;
    }
    .custom-tree-node {
      display: flex;
      align-items: center;
    }

    .is-current {
      > .el-tree-node__content {
        .label {
          display: block !important;
        }
      }
    }
  }
}

@media (max-width: 1000px) {
  .box {
    .innerBox {
      background-color: white;
      flex-direction: column;

      .popInFo {
        margin: 10px 0 0;
        > .item {
          min-height: 100px;
          border: #f1f3f8 1px solid;
          margin-bottom: 15px;
          padding: 5px;
          font-size: 14px;
          > div:nth-of-type(1) {
            font-size: 16px;
          }
          > .content {
            .itemInner {
              padding: 10px 0;
              display: flex;
              flex-direction: column;
              border-bottom: 1px #f1f3f8 solid;
              > div:nth-of-type(1) {
                align-self: flex-start;
                margin-bottom: 10px;
              }
              > div:nth-of-type(2) {
                ::v-deep .el-radio__label {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
  .dialogAddTree {
    ::v-deep .el-dialog {
      min-width: 100%;
      height: 100%;
      margin-top: 0 !important;
      position: fixed;
      top: 0;
      .el-dialog__body {
        height: calc(100% - 54px);
        .diaRight {
          max-height: 100%;
          .el-tree {
            min-width: max-content;
          }
        }
      }
    }
  }
  .dialogAddTree1 {
    ::v-deep .el-dialog {
      min-width: 100%;
      .el-dialog__body {
        height: calc(100% - 54px);
        .diaRight {
          max-height: 100%;
          .el-tree {
            min-width: max-content;
          }
        }
      }
    }
  }
}
</style>
